<template>
  <custom-header-vue :customTitle="customTitle" :backIcon="true" class="header">
    <template v-slot:custom>
      <view style="padding: 0 30rpx 30rpx 30rpx;">
        <view class="flex-row flex-ali-cen flex-jus-bet">
          <view class="f-s-28 flex-col" style="color: var(--grey-text);">
            <view class="f-s-28 " style="color: var(--white-text);">
              《{{ groupInfo.group_name }}》- {{ userInfo.name }}
            </view>
          </view>
          <view class="flex-row flex-ali-cen">
            <view class="flex-row flex-ali-cen">
              <view class="">
                <picker @change="bindPickerChange" :value="shopIndex"
                        :range="shopList.map(item=>item.shop_alias)">
                  <view class="f-s-28" style="color: #0A84FF;">{{ shopList[shopIndex].shop_alias }}
                  </view>
                </picker>
              </view>
              <uni-icons type="down" size="16" color="#0A84FF"></uni-icons>
            </view>
          </view>
        </view>
        <view class="f-s-24 m-t-10" style="color: var(--grey-text);">* 默认门店可以切换，应用进入后可自由切换门店</view>
      </view>
    </template>
  </custom-header-vue>
  <scroll-view scroll-y :style="{'top':scrollTop,'height':scrollHeight}" class="scroll" :show-scrollbar="false">
    <view class="flex-row flex-wrap container">
      <view class="content-width flex-col flex-ali-cen flex-jus-cen" v-for="(item,index) in applicationList"
            :key="index" @click="hrefChild(item)">
        <uni-icons custom-prefix="iconfont" :type="item.icon" size="36" :color="item.color"></uni-icons>
        <view class="m-t-20 f-s-28" style="color: var(--white-text);font-weight: 600;">{{ item.name }}</view>
      </view>
    </view>
    <bottom-company-vue :footerStyle="footerStyle"></bottom-company-vue>
  </scroll-view>

</template>

<script>
import customHeaderVue from '@/components/customHeader.vue'
import bottomCompanyVue from '@/components/bottomCompany.vue'

export default {
  components: {
    customHeaderVue,
    bottomCompanyVue
  },
  data() {
    return {
      customTitle: '应用中心',
      scrollTop: '0',
      scrollHeight: '0',
      footerStyle: {
        position: 'absolute',
        bottom: '20rpx',
        left: 0
      },
      userInfo: this.$commonJs.getUserInfo(),
      groupInfo: this.$commonJs.getGroupInfo(),
      loadStatus: false,
      storageInfo: this.$commonJs.getStorageSize(),
      systemInfo: this.$commonJs.getSystemInfoSync(),
      shopIndex: this.$commonJs.getChooseShopIndex(),
      shopList: this.$commonJs.getShopList(),
      applicationList: [
        {
          'name': '经营分析',
          'url': '/pages/application/business_ana',
          'color': this.$commonJs.getRandomColor(),
          'icon': 'icon-jingyingfenxi1'
        },
        {
          'name': '桌台分析',
          'url': '/pages/application/desk_ana',
          'color': this.$commonJs.getRandomColor(),
          'icon': 'icon-zonghechaxun'
        },
        {
          'name': '客户分析',
          'url': '/pages/application/custom_ana',
          'color': this.$commonJs.getRandomColor(),
          'icon': 'icon-header-07'
        },
        {
          'name': '营业统计',
          'url': '/pages/application/business_sta',
          'color': this.$commonJs.getRandomColor(),
          'icon': 'icon-yingyeshouru'
        },
        {
          'name': '实时桌态',
          'url': '/pages/application/room_real',
          'color': this.$commonJs.getRandomColor(),
          'icon': 'icon-shafayi'
        },
        {
          'name': '预定看板',
          'url': '/pages/application/room_pre',
          'color': this.$commonJs.getRandomColor(),
          'icon': 'icon-yuyue'
        },
        {
          'name': '销售业绩',
          'url': '/pages/application/sales_performance',
          'color': this.$commonJs.getRandomColor(),
          'icon': 'icon-xiaoshouyeji'
        }
      ],
    }
  },

  mounted() {
    const query = uni.createSelectorQuery().in(this)
    const self = this
    query.select(".header")
        .boundingClientRect((data) => {
          self.scrollTop = data.height + 15 + 'px'
          let topHeight = data.height + 15 + 'px'
          self.scrollHeight = `calc(100vh - ${topHeight})`
        })
        .exec();
  },
  onLoad() {

  },
  onShow(){
    this.shopIndex = this.$commonJs.getChooseShopIndex()
  },
  methods: {
    /**
     * 门店切换
     * @param e
     */
    bindPickerChange(e) {
      const self = this
      if (e.detail.value >= 0) {
        self.shopIndex = e.detail.value
        self.$commonJs.systemConfig.shopIndex = e.detail.value
        self.$commonJs.setStorage(
            'shopIndex',
            e.detail.value,
            function () {
              self.$commonJs.logger.debug('设置门店成功！')
            }
        )
      }
    },
    /**
     * 跳转至应用层
     * @param item
     */
    hrefChild(item) {
      if (item.url) {
        uni.navigateTo({
          url: item.url
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.scroll {
  position: absolute;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.content-width {
  width: calc((100% - 60rpx) / 3);
  box-sizing: border-box;
  background-color: var(--bg-center-color);
  text-align: center;
  height: calc((100vw - 120rpx) / 3);
  border-radius: 20rpx;
  margin: 0 30rpx 30rpx 0;
}

.content-width:nth-child(3n) {
  margin-right: 0;
  /* 每行最后一个元素去掉右边距 */
}

/* 使用多个伪元素占位补全最后一行 */
.container::after {
  content: '';
  flex-grow: 1;
  /* 自动占用剩余空间 */
  width: calc((100% - 30px) / 3);
  /* 与 .item 宽度一致 */
  margin: 0;
  /* 无需间距 */
  visibility: hidden;
  /* 不可见 */
}
</style>